<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>图片识别 - 智能水产养殖系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        .upload-area {
            border: 2px dashed #dee2e6;
            border-radius: 10px;
            padding: 40px;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .upload-area:hover {
            border-color: #007bff;
            background-color: #f8f9fa;
        }
        .upload-area.dragover {
            border-color: #28a745;
            background-color: #d4edda;
        }
        .preview-image {
            max-width: 100%;
            max-height: 300px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .result-card {
            display: none;
        }
    </style>
</head>
<body class="bg-light">

<div class="container py-4">
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="text-primary">
                <i class="bi bi-camera"></i> 鱼类图片识别
            </h2>
            <p class="text-muted">上传鱼类图片，AI将自动识别鱼类品种</p>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="bi bi-upload"></i> 图片上传
                    </h5>
                </div>
                <div class="card-body">
                    <form id="upload-form" enctype="multipart/form-data">
                        <div class="mb-3">
                            <label for="image" class="form-label">选择图片文件</label>
                            <input type="file" class="form-control" id="image" name="image" accept="image/*" required>
                            <div class="form-text">支持 JPG、PNG、GIF 格式的图片</div>
                        </div>
                        
                        <div class="mb-3" id="preview-container" style="display: none;">
                            <label class="form-label">图片预览：</label>
                            <img id="preview-image" class="img-fluid rounded" style="max-height: 300px;">
                        </div>
                        
                        <button type="submit" class="btn btn-success w-100">
                            <i class="bi bi-search"></i> 开始识别
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card shadow">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">
                        <i class="bi bi-lightbulb"></i> 识别结果
                    </h5>
                </div>
                <div class="card-body">
                    <div id="result-container" style="display: none;">
                        <div id="recognition-result"></div>
                    </div>
                    
                    <div id="loading-container" style="display: none;">
                        <div class="text-center">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">识别中...</span>
                            </div>
                            <p class="mt-2">AI正在分析图片，请稍候...</p>
                        </div>
                    </div>
                    
                    <div id="empty-container">
                        <div class="text-center text-muted">
                            <i class="bi bi-image" style="font-size: 3rem;"></i>
                            <p class="mt-2">请上传图片开始识别</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 识别说明 -->
            <div class="card shadow mt-3">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">
                        <i class="bi bi-info-circle"></i> 识别说明
                    </h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <h6><i class="bi bi-lightbulb"></i> 识别原理</h6>
                        <p>本系统使用深度学习算法，基于大量鱼类图片训练，能够准确识别常见鱼类品种。</p>
                    </div>
                    
                    <div class="alert alert-warning">
                        <h6><i class="bi bi-exclamation-triangle"></i> 使用注意</h6>
                        <ul class="mb-0">
                            <li>请上传清晰的鱼类图片</li>
                            <li>支持常见鱼类品种识别</li>
                            <li>识别结果仅供参考</li>
                            <li>建议在光线充足环境下拍摄</li>
                        </ul>
                    </div>

                    <div class="alert alert-success">
                        <h6><i class="bi bi-check-circle"></i> 支持品种</h6>
                        <p>Bream、Roach、Whitefish、Parkki、Perch、Pike、Smelt 等常见鱼类</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-12 text-center">
            <a href="{{ url_for('user_home') }}" class="btn btn-secondary">
                <i class="bi bi-arrow-left"></i> 返回主页
            </a>
        </div>
    </div>
</div>

<script>
document.getElementById('image').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('preview-image').src = e.target.result;
            document.getElementById('preview-container').style.display = 'block';
        };
        reader.readAsDataURL(file);
    }
});

document.getElementById('upload-form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    
    document.getElementById('loading-container').style.display = 'block';
    document.getElementById('result-container').style.display = 'none';
    document.getElementById('empty-container').style.display = 'none';
    
    fetch('/image_recognition', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(result => {
        document.getElementById('loading-container').style.display = 'none';
        document.getElementById('result-container').style.display = 'block';
        
        document.getElementById('recognition-result').innerHTML = `
            <div class="alert alert-success">
                <h5><i class="bi bi-check-circle"></i> 识别成功</h5>
                <p><strong>鱼类品种：</strong>${result.species}</p>
                <p><strong>置信度：</strong>${(result.confidence * 100).toFixed(1)}%</p>
                <p><strong>详细信息：</strong>${result.message}</p>
            </div>
        `;
    })
    .catch(error => {
        document.getElementById('loading-container').style.display = 'none';
        document.getElementById('empty-container').style.display = 'block';
        console.error('Error:', error);
        alert('识别失败，请稍后重试');
    });
});
</script>

</body>
</html> 